<template>
  <Nav :showBlack="false">
    <img src="../assets/title.png" class="logo" alt=""  >
  </Nav>
  <div class="page">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>
    <div class="tabs">
      <div class="tab" v-for="(item,index) in tab_data" :class="{active:index === current_tab}" :key="index" @click="changeTab(index)">
        {{item}}
      </div>
    </div>
    <img src="" alt="">
    <div class="items">
        <div class="item" @click="goDetail" v-show="current_tab == 0">
          <div class="border">
            <div class="imgBox" style="background-color:pink;"></div>
            <div class="nameBox">
              <div class="name">长江颂·茶道套盒</div>
              <div class="control">
                 <div class="viewBox">
                   <img src="../assets/look.png" alt="">
                   <span>18</span>
                 </div>
                <div class="likeBox">
                  <img src="../assets/like.png" alt="">
                  <span>3</span>
                </div>
              </div>
            </div>
            <div class="info">
              在长江之滨，荆楚之地，长江出版集团屹立二十载，传承文化，启迪智慧。套盒整体以书卷为形，典雅大方，既是包装，亦是书柜中的精致摆件。盒面融入湖北元素，以长江天际.
            </div>
          </div>
        </div>
        <div class="item"  @click="goDetail" v-show="current_tab == 0">
          <div class="border">
            <div class="imgBox" style="background-color:pink;"></div>
            <div class="nameBox">
              <div class="name">长江颂·茶道套盒</div>
              <div class="control">
                <div class="viewBox">
                  <img src="../assets/look.png" alt="">
                  <span>18</span>
                </div>
                <div class="likeBox">
                  <img src="../assets/like.png" alt="">
                  <span>3</span>
                </div>
              </div>
            </div>
            <div class="info">
              在长江之滨，荆楚之地，长江出版集团屹立二十载，传承文化，启迪智慧。套盒整体以书卷为形，典雅大方，既是包装，亦是书柜中的精致摆件。盒面融入湖北元素，以长江天际.
            </div>
          </div>
       </div>
        <div class="item-spec imgBox" v-show="current_tab == 1" @click="goSpeDetial" style="background-image: url('../assets/ex-img.png');background-color: #fff;"></div>
    </div>
  </div>
  <Footer/>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { onMounted, reactive, ref, onActivated, nextTick } from 'vue';
import Footer from '@/components/tab.vue'
import Nav from '@/components/nav.vue'
const router = useRouter();
let tab_data = reactive(['全部','专区']);
let current_tab = ref(0);
const goDetail = () => {
  router.push({path:'detail'})
}
const changeTab = (index) => {
  current_tab.value = index;
}
const goSpeDetial = (x) => {
  router.push({path:'speDetail'})
}
</script>
<style scoped lang="scss">
  .page {
    background: #0f1830;
    padding-top: 170px;
    padding-bottom: 200px;
    color:#fff;
  }
  .logo {
    height: 50px;
    width: auto;
  }
  .banner {
    width: 100%;
    height: 550px;
    padding: 0 60px;
    overflow: hidden;
  }
  .my-swipe {
    border-radius: 24px;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    height: 460px;
  }
  .tabs {
    padding: 0 60px;
    color:#fff;
    display: flex;
    margin-bottom:40px;
    .tab {
      font-size: 40px;
      margin-right: 30px;
      padding: 20px 40px;
      border-radius: 35px;
      font-weight: bold;
      color:#aeaeae;
      &.active {
        background: #f4e9ce;
        color:#222222;
      }
    }
  }
  .item-spec {
    width: 100%;
    height: 500px;
    border-radius: 30px;
    margin-bottom: 40px;
  }
  .items {
    padding: 0 60px;
    .border {
      border:1px solid #4b4e55;
      border-radius: 24px;
      padding: 49px;
      .imgBox {
        width: 100%;
        height: 750px;
        border-radius: 24px;
        margin-bottom: 50px;
      }
    }
    .item {
       margin-bottom: 60px;
      .nameBox {
        display: flex;
        justify-content: space-between;
        height: 90px;
        .name {
          font-size: 46px;
        }
      }
      .control {
        display: flex;
        justify-content: space-between;
        height: 90px;
        > div {
          margin-left: 40px;
          font-size: 40px;
          img {
            height: 40px;
            width: auto;
            margin-right:10px;
            vertical-align: text-bottom;
          }
        }
      }
      .info {
        font-size: 36px;
        line-height: 2;
      }
    }
  }
</style>



